<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div class="CmAddList_box">
    <div class="CmAddList_header">
      <div class="CmAddList_header_return" @click="returnHistiy">
        <img src="@/pages/mobile/assets/img/Back@3x.png" alt />
        <span>返回</span>
      </div>
      <p>新建{{ clientType }}客户</p>
      <div
        class="CmAddList_save"
        :class="{ CmAddList_font_active: CmAddListDataGROk }"
        @click="submitOne"
        v-if="CmAddListDataGROk"
      >
        保存
      </div>
      <div
        class="CmAddList_save"
        :class="{ CmAddList_font_active: CmAddListDataQYOk }"
        @click="submitEnterprise"
        v-else-if="CmAddListDataQYOk"
      >
        保存
      </div>
      <div class="CmAddList_save" v-else>保存</div>
    </div>
    <div class="dictograph_box">{{ g_r }}{{ q_y }}</div>
    <div class="scroll">
      <scroll class="CmAddList_content">
        <div class="CmAddList_title">请填写{{ clientType }}客户信息</div>
        <!-- 个人客户 -->
        <div class="CmAddList_list_box" v-if="clientType == '个人'">
          <group class="CmAddList_list" label-align="right">
            <div class="CmAddList_list_item">
              <span>客户名称</span>
              <input
                v-model="CmAddListDataOne.customerName"
                type="text"
                placeholder="请输入"
              />
            </div>
            <popup-picker
              class="CmAddList_list_item_typeId"
              title="证件类型"
              placeholder="请选择"
              :data="listTypeOneId"
              show-name
              v-model="CmAddListDataOne.identityType"
              value-text-align="left"
            ></popup-picker>
            <div class="CmAddList_list_item">
              <span>证件号码</span>
              <input
                v-model="CmAddListDataOne.identityNo"
                type="text"
                placeholder="请输入客户证件证号"
              />
            </div>
            <div class="CmAddList_list_item writeNO">
              <span>主办经理</span>
              <input
                v-model="CmAddListDataOne.mainManagerId.name"
                type="text"
                placeholder="经理姓名"
                onfocus="this.blur()"
              />
            </div>
            <div class="CmAddList_list_item writeNO">
              <span>所属部门</span>
              <input
                v-model="CmAddListDataOne.deptId"
                type="text"
                placeholder="所属部门"
                onfocus="this.blur()"
              />
            </div>
            <!-- 附件信息   -->
            <div class="CmAddList_list_item">
              <span>附件信息</span>
              <input
                id="CmAddListFile"
                ref="CmAddListFile"
                style="display: none;"
                placeholder="请上传《融资租赁业务申请书》"
                type="file"
                accept="image/png,image/jpeg"
                name="file"
                @change="handleFile"
                class="CmAddListInput"
              />
              <input
                v-model="CmAddListDataOne.censusRegisterAddress"
                type="text"
                placeholder="请上传《融资租赁业务申请书》"
                onfocus="this.blur()"
              />
              <div
                class="CmAddList_list_item_camera vux-header-more"
                @click="cameraInfo"
              >
                <img src="@/pages/mobile/assets/img/camera.jpg" alt />
              </div>
            </div>
          </group>
          <div class="CmAddList_gr_foot">
            <x-icon type="ios-star" size="10"></x-icon>
            <p class="CmAddList_foot_text">请填写上述所有内容再保存。</p>
          </div>
        </div>
        <div class="CmAddList_list_box" v-else-if="clientType == '单位'">
          <!-- 单位客户 -->
          <group class="CmAddList_list" label-align="right">
            <div class="CmAddList_list_item">
              <span>承租人</span>
              <input
                v-model="CmAddListDataEnterprise.customerName"
                type="text"
                placeholder="请输入"
              />
            </div>
            <popup-picker
              class="CmAddList_list_item_typeId"
              title="证件类型"
              placeholder="请选择"
              :data="listTypeId"
              show-name
              v-model="CmAddListDataEnterprise.identityType"
              value-text-align="left"
            ></popup-picker>
            <div class="CmAddList_list_item">
              <span>证件号码</span>
              <input
                v-model="CmAddListDataEnterprise.identityNo"
                type="text"
                placeholder="客户身份证号"
              />
            </div>
            <div class="CmAddList_list_item writeNO">
              <span>主办经理</span>
              <input
                v-model="CmAddListDataEnterprise.mainManagerId.name"
                type="text"
                placeholder="经理姓名"
                onfocus="this.blur()"
              />
            </div>
            <div class="CmAddList_list_item writeNO">
              <span>所属部门</span>
              <input
                v-model="CmAddListDataEnterprise.deptId"
                type="text"
                placeholder="所属部门"
                onfocus="this.blur()"
              />
            </div>
            <!-- 附件信息   -->
            <div class="CmAddList_list_item">
              <span>附件信息</span>
              <input
                v-model="CmAddListDataEnterprise.actualAddress"
                type="text"
                placeholder="请上传《融资租赁业务申请书》"
                onfocus="this.blur()"
              />
              <div
                class="CmAddList_list_item_camera vux-header-more"
                @click="cameraInfo"
              >
                <img src="@/pages/mobile/assets/img/camera.jpg" alt />
              </div>
            </div>
          </group>
          <div class="CmAddList_gr_foot">
            <x-icon type="ios-star" size="10"></x-icon>
            <p class="CmAddList_foot_text">请填写上述所有内容再保存。</p>
          </div>
        </div>
      </scroll>
    </div>
    <!-- 相机弹框 -->
    <div
      class="CmAddList_alert"
      @click.stop="cameraInfoNo"
      :class="{ CmAddList_alert_active: camera }"
    >
      <div class="CmAddList_alert_box">
        <div class="CmAddList_alert_box_menu" @click.stop>
          <div class="CmAddList_alert_box_menu_item" @click="openCamera()">
            拍摄
          </div>
          <div class="CmAddList_alert_box_menu_item" @click="openAlbum()">
            从相册选择上传
          </div>
          <div class="CmAddList_alert_box_menu_item" @click="openFiles()">
            上传文件
          </div>
        </div>
        <div class="CmAddList_alert_box_action">
          <div
            class="CmAddList_alert_box_action_cell"
            @click.stop="cameraInfoNo"
          >
            取消
          </div>
        </div>
      </div>
    </div>
    <toast
      v-model="imgPositionValue"
      type="text"
      :time="showPositionValuetime"
      is-show-mask
      :text="showPositionValuetext"
      :position="position"
    ></toast>
  </div>
</template>

<script>
import {
  GroupTitle,
  Group,
  Cell,
  XInput,
  Selector,
  PopupPicker,
  Datetime,
  XNumber,
  ChinaAddressData,
  XAddress,
  XTextarea,
  XSwitch,
  Toast,
  XButton,
  Loading
} from "vux";
import "./CmAddList.less";
import Scroll from "@/pages/mobile/assets/js/JoysScroll/JoysScroll";
export default {
  name: "",
  components: {
    Group,
    GroupTitle,
    Cell,
    XInput,
    Selector,
    PopupPicker,
    XAddress,
    Datetime,
    XNumber,
    XTextarea,
    XSwitch,
    Scroll,
    Toast,
    XButton,
    Loading
  },
  data () {
    return {
      camera: false, // 相机弹框
      listTypeItem: [],
      listTypeOneId: [
        []
      ], //个人证件类型
      listTypeId: [
        []
      ], //单位证件类型
      listTypeScale: [
        []
      ], // 单位类型型选择
      clientType: "", //选择新建类型   {个人 单位}
      upImageInfo: "", //上传的图片信息
      typeIdCard: "", //      证件类型
      // 个人表单数据
      CmAddListDataOne: {
        customerName: "",
        mainManagerId: {},
        deptId: "",
        identityType: [],
        identityNo: "",
        // 身份证
        censusRegisterAddress: "",
        // birthday: "",
        // nation: "",
        // sex: ""
      },
      // 单位表单数据
      CmAddListDataEnterprise: {
        customerName: "",
        mainManagerId: {},
        deptId: "",
        // enterpriseScale: [],
        identityType: [],
        identityNo: "",
        // 营业执照
        actualAddress: "",
        // registeredCurrencyId: "",
        // establishmentDate: "",
        // creatorId: "",
        // operatingPeriodEnd: "",
        // businessScope: ""
      },
      identityCodeState: false, //身份证号填写是否合法
      businessCodeState: false, //单位社会统一码是否合法
      CmAddListDataGR: "", // 监听个人客户表单是否为空
      CmAddListDataQY: "", // 监听单位客户表单是否为空
      CmAddListDataGROk: false, //个人按钮添加颜色并可点击
      CmAddListDataQYOk: false, //单位按钮添加颜色并可点击
      imgPositionValue: false, // 图片识别失败信息提示信息提示
      position: "default", //弹框
      showPositionValuetext: "", // 弹框提示信息
      showPositionValuetime: 3000 //弹框显示时间
    };
  },
  methods: {
    // 个人信息请求
    myInfoQuery () {
      console.log( 'jjjj')
      this.$axios({
        method: "get",        
        url: "/joys-rest/lss-customer/custInfo",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
      })
        .then(res => {
          console.log(res, 'gggg')
          // // 新建个人
          this.CmAddListDataOne.mainManagerId.name = res.data.mainManagerName
          this.CmAddListDataOne.mainManagerId.updatorId = res.data.mainManagerId
          this.CmAddListDataOne.deptId = res.data.deptName
          // 新建客户
          this.CmAddListDataEnterprise.mainManagerId.name = res.data.mainManagerName
          this.CmAddListDataEnterprise.mainManagerId.updatorId = res.data.mainManagerId
          this.CmAddListDataEnterprise.deptId = res.data.deptName
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 新建客户类型判断
    loadInfo (val) {
      if (val == 1) {
        this.clientType = "";
        this.typeIdCard = "idCard";
      } else if (val == 2) {
        this.typeIdCard = "businessLicense";
        this.clientType = "单位";
        // this.QueryEnumGM("lss-customer", "personalType", this.listTypeScale); //单位类型
      } else {
        this.clientType = "个人";
        this.typeIdCard = "idCard";
      }
    },
    // 查询枚举
    QueryEnum (serviceName, typeName, dataArray) {
      this.$axios({
        method: "get",
        url: "/joys-rest/" + serviceName + "/enums/" + typeName + "/items",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
          "Content-Type": "application/json;charset=UTF-8"
        }
      })
        .then(res => {
          for (const key in res.data) {
            dataArray[0].push({
              name: res.data[key].label,
              value: res.data[key].value
            });
          }
        })
        .catch(error => {
          console.log(error, "枚举获取失败");
        });
    },
    // 单位规模查询
    // QueryEnumGM (serviceName, typeName, dataArray) {
    //   // /items/enterpriseScale/root
    //   this.$axios({
    //     method: "get",
    //     url: "/joys-rest/" + serviceName + "/items/" + typeName + "/root",
    //     headers: {
    //       "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
    //       "Content-Type": "application/json;charset=UTF-8"
    //     }
    //   })
    //     .then(res => {
    //       for (const key in res.data) {
    //         dataArray[0].push({
    //           name: res.data[key].itemName,
    //           value: res.data[key].itemCode
    //         });
    //       }
    //     })
    //     .catch(error => {
    //       console.log(error, "枚举获取失败");
    //     });
    // },
    openFiles () {
      this.$refs.CmAddListFile.click();
    },
    // 文件储存方法
    handleFile (e) {
      let x = document.getElementById("CmAddListFile").files[0];
      // this.userInfo.headImgSrc = ""
      let sizeimg = x.size;
      if (sizeimg > 1000000) {
        this.$message.error("图片大小不能超过1024KB");
        return;
      }

      let params = new FormData(); //创建一个form对象
      params.append("file", x, x.name); //append 向form表单添加数据
      params.append("dirName", "/user");
      params.append("one2one", true);
      params.append("overwrite", true);
      params.append("sourceId", this.userInfo.userId);
      //添加请求头  通过form添加的图片和文件的格式必须是multipart/form-data
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
          Accept: "application/json"
        }
      };
      // debugger
      this.$axios
        .post("/joys-rest/joys-file/file/upload", params, config)
        .then(res => {
          this.userInfo.headImgId = res.data.fileId;
          this.headImgSrc = res.data.thumbnail;
          this.defaultImg = !this.defaultImg;
        })
        .catch(error => { });
    },
    // 打开相册
    openAlbum () {
      navigator.camera.getPicture(this.albumSuccess, this.albumError, {
        quality: 50,
        sourceType: 0,
        targetWidth: 1000,
        targetHeight: 1000,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY
      });
      this.camera = false;
    },
    // 打开相机
    openCamera () {
      navigator.camera.getPicture(this.albumSuccess, this.albumError, {
        quality: 50,
        sourceType: 1,
        targetWidth: 1000,
        targetHeight: 1000,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.CAMERA
      });
      this.camera = false;
    },
    //调取成功触发事件图片上传服务器做对比
    albumSuccess (imageURL) {
      // alert(imageURL, "图片数据");
      if (this.clientType == "个人") {
        this.imgUploading();
        this.$axios({
          method: "post",
          url: `/joys-rest/joys-recognition/recog/idCard`,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
            "Content-Type": "application/json;charset=utf-8"
          },
          data: imageURL
        })
          .then(res => {
            this.CmAddListDataOne.identityType = ["身份证"];
            this.CmAddListDataOne.identityNo = res.data.cardId; //证件号码
            this.CmAddListDataOne.censusRegisterAddress = res.data.address; //地址
            this.CmAddListDataOne.birthday = res.data.birth; //出生年月
            this.CmAddListDataOne.nation = res.data.nationality; //民族
            this.CmAddListDataOne.sex = res.data.sex; //性别
            this.$vux.loading.hide();
            this.showPositionValuetext = "识别完成,请校验信息";
            this.imgPosition("top");
          })
          .catch(error => {
            this.showPositionValuetext = "上传失败";
            this.imgPosition("middle");
            // alert(error, "上传失败");
            console.log(error);
          });
      } else if (this.clientType == "单位") {
        this.imgUploading();
        this.$axios({
          method: "post",
          url: `/joys-rest/joys-recognition/recog/businessLicense`,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
            "Content-Type": "application/json;charset=utf-8"
          },
          data: imageURL
        })
          .then(res => {
            this.CmAddListDataEnterprise.name = res.data.name; //名称
            this.CmAddListDataEnterprise.identityType = ["社会统一信用码"]; //证件类型
            this.CmAddListDataEnterprise.identityNo = res.data.regNum; //证件号码//注册号
            this.CmAddListDataEnterprise.actualAddress = res.data.address; //经营场所
            this.CmAddListDataEnterprise.registeredCurrencyId =
              res.data.captial; //注册资本
            this.CmAddListDataEnterprise.establishmentDate =
              res.data.establishDate; //注册日期
            this.CmAddListDataEnterprise.creatorId = res.data.person; //经营者
            this.CmAddListDataEnterprise.operatingPeriodEnd =
              res.data.validPeriod; //有效期
            this.CmAddListDataEnterprise.businessScope = res.data.business; //经营范围
            this.$vux.loading.hide();
            this.showPositionValuetext = "识别完成,请校验信息";
            this.imgPosition("top");
          })
          .catch(error => {
            this.showPositionValuetext = "识别失败";
            this.imgPosition("middle");
            // alert(error, "上传失败");
            console.log(error);
          });
      } else { }
    },
    //调取失败触发事件
    albumError (message) {
      // this.showPositionValuetext = "未识别";
      // this.imgPosition("middle");
    },
    // 点击保存个人
    submitOne () {
      console.log(this.CmAddListDataOne.mainManagerId.name, '名字')
      console.log(this.CmAddListDataOne.mainManagerId.updatorId, 'id')
      // debugger
      if (this.CmAddListDataGROk) {
        this.$axios({
          method: "put",
          url: "/joys-rest/lss-customer/custInfo/person",
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
            // "Content-Type": "application/json;charset=utf-8"
          },
          timeout: 5000,
          data: {
            customerId: Number(new Date()),
            customerName: this.CmAddListDataOne.customerName, //名字
            mainManagerId: this.CmAddListDataOne.mainManagerId.updatorId, //主办经理
            identityType: this.CmAddListDataOne.identityType[0], //证件类型
            identityNo: this.CmAddListDataOne.identityNo, //证件号                
            // viceManagerId:"75902184-1ec5-4ddc-850a-ab10d00e6a14",
            customerType: "PERSONAL"
            // deptId: this.CmAddListDataOne.deptId, //所属部门
            // censusRegisterAddress: this.CmAddListDataOne.censusRegisterAddress, //地址
            // birthday: this.CmAddListDataOne.birthday, //年龄
            // nation: this.CmAddListDataOne.nation, //民族
            // sex: this.CmAddListDataOne.sex, //性别
          }
        })
          .then(res => {
            this.showPositionValuetext = "提交成功";
            this.imgPosition("middle");
            setTimeout(() => {
              this.$router.push({
                path: "/custInfo"
              });
            }, 500);
          })
          .catch(error => {
            this.showPositionValuetext = "提交失败";
            this.imgPosition("middle");
            console.log(error, "上传失败个人");
          });
      }
    },
    // 点击保存单位
    submitEnterprise () {
      if (this.CmAddListDataQYOk) {
        this.$axios({
          method: "put",
          url: "/joys-rest/lss-customer/custInfo/corp",
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
            "Content-Type": "application/json;charset=utf-8"
          },
          timeout: 5000,
          data: {
            // 营业执照字段
            customerId: Number(new Date()),
            customerName: this.CmAddListDataEnterprise.customerName, //单位名字
            identityType: this.CmAddListDataEnterprise.identityType[0], //证件类型
            identityNo: this.CmAddListDataEnterprise.identityNo, //证件号
            // enterpriseScale: this.CmAddListDataEnterprise.enterpriseScale[0], //单位规模
            mainManagerId: this.CmAddListDataEnterprise.mainManagerId.updatorId, //主办经理
            deptId: this.CmAddListDataEnterprise.deptId, //所属部门
            // actualAddress: this.CmAddListDataEnterprise.actualAddress, //经营场所
            // registeredCurrencyId: this.CmAddListDataEnterprise
            //   .registeredCurrencyId, //注册资本
            // establishmentDate: this.CmAddListDataEnterprise.establishmentDate, //注册日期
            // creatorId: this.CmAddListDataEnterprise.creatorId, //经营者
            // operatingPeriodEnd: this.CmAddListDataEnterprise.operatingPeriodEnd, //有效期
            // businessScope: this.CmAddListDataEnterprise.businessScope, //经营范围
            customerType: "ENTERPRISE"
          }
        })
          .then(res => {
            this.showPositionValuetext = "提交成功";
            this.imgPosition("middle");
            setTimeout(() => {
              this.$router.push({
                path: "/custInfo"
              });
            }, 500);
          })
          .catch(error => {
            this.showPositionValuetext = error.response.data.message
            this.imgPosition("middle");
            console.log(error, "上传失败单位");
          });
      }
    },
    // 图片识别loading
    imgUploading () {
      this.$vux.loading.show({
        text: "图片识别中"
      });
      setTimeout(() => {
        this.$vux.loading.hide();
      }, 8000);
    },
    // 图片识别错误信息提示
    imgPosition (position) {
      this.position = position;
      this.imgPositionValue = true;
    },
    // 身份证校验
    identityCode (num) {
      let reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
      if (!reg.test(num)) {
        this.showPositionValuetext = "请输入正确证件号码";
        this.imgPosition("top");
      } else {
        this.identityCodeState = true;
      }
    },
    // 营业执照校验
    businessCode (num) {
      let re = /[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g; //18位
      let reg = /^[A-Za-z0-9]\w{14}$/g;
      if (num.length == 15) {
        if (reg.test(num)) {
          this.businessCodeState = true;
        } else {
          this.showPositionValuetext = "请输入正确营业执照";
          this.imgPosition("top");
        }
      } else if (num.length == 18) {
        if (re.test(num)) {
          this.businessCodeState = true;
        } else {
          this.showPositionValuetext = "请输入正确营业执照";
          this.imgPosition("top");
        }
      }
    },
    // 返回按钮
    returnHistiy () {
      this.$router.goBack(1);
    },
    // 点击调用ocr弹框
    cameraInfo () {
      this.camera = true;
    },
    // 关闭ocr弹框
    cameraInfoNo () {
      this.camera = false;
    }
  },
  // 监听表单填写是否满足按钮显示条件
  computed: {
    g_r () {
      this.CmAddListDataGR =
        Number(Boolean(this.CmAddListDataOne.customerName)) +
        Number(Boolean(this.CmAddListDataOne.identityType)) +
        Number(Boolean(this.CmAddListDataOne.identityNo));
    },
    q_y () {
      this.CmAddListDataQY =
        Number(Boolean(this.CmAddListDataEnterprise.customerName)) +
        Number(Boolean(this.CmAddListDataEnterprise.identityType)) +
        Number(Boolean(this.CmAddListDataEnterprise.identityNo));
    }
  },
  // 监听表单填写是否满足按钮显示条件
  watch: {
    "CmAddListDataOne.identityNo" (val) {
      if (val.length == 18) {
        this.identityCode(this.CmAddListDataOne.identityNo);
      } else if (val.length > 18) {
        this.identityCodeState = false;
        this.showPositionValuetext = "请输入正确证件号码";
        this.imgPosition("top");
      } else {
        this.identityCodeState = false;
      }
    },
    // 营业执照验证
    "CmAddListDataEnterprise.identityNo" (val) {
      if (val.length == 15 || val.length == 18) {
        this.businessCode(this.CmAddListDataEnterprise.identityNo);
      } else if (val.length > 18) {
        this.businessCodeState = false;
        this.showPositionValuetext = "请输入正确营业执照";
        this.imgPosition("top");
      } else {
        this.businessCodeState = false;
      }
    },
    CmAddListDataGR (newVal, oldVal) {
      if (Number(newVal) === 3) {
        this.CmAddListDataGROk = true;
      } else {
        this.CmAddListDataGROk = false;
      }
    },
    CmAddListDataQY (newVal, oldVal) {
      if (Number(newVal) === 3) {
        this.CmAddListDataQYOk = true;
      } else {
        this.CmAddListDataQYOk = false;
      }
    }
  },
  mounted () {
    this.myInfoQuery() //获取主办经理 所属部门
    this.loadInfo(this.$route.query.val)
    this.QueryEnum("lss-customer", "certificateType", this.listTypeId); //证件类型方式
    this.QueryEnum("lss-customer", "personalType", this.listTypeOneId); //个人证件类型方式 
    // this.loadInfo();
  }
};
</script>

<style scoped lang="less">
.CmAddList_box {
  position: fixed;
  top: 0;
  z-index: 500;
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  overflow: hidden;
  .CmAddList_header {
    width: 100%;
    height: 0.44rem;
    text-align: center;
    line-height: 0.44rem;
    background: #ffffff;
    position: fixed;
    z-index: 201;
    box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    .CmAddList_header_return {
      margin-top: -0.04rem;
      float: left;
      img {
        // width: 0.15rem;
        height: 0.205rem;
        padding-left: 0.085rem;
        padding-top: 0.02rem;
      }
      span {
        font-family: Regular;
        font-size: 0.17rem;
        color: #3e3e3e;
        letter-spacing: -0.41px;
        line-height: 0.22rem;
      }
    }
    p {
      font-family: PingFangSC-Semibold;
      font-size: 0.17rem;
      color: #3e3e3e;
      letter-spacing: -0.41px;
      text-align: center;
      height: 0.44rem;
      font-weight: 700;
      line-height: 0.44rem;
      margin-left: 0.7rem;
      margin-right: 0.7rem;
    }
    .CmAddList_save {
      width: 0.56rem;
      height: 0.32rem;
      line-height: 0.32rem;
      margin-top: -0.38rem;
      float: right;
      margin-right: 0.16rem;
      background: rgba(190, 148, 87, 0.25);
      border-radius: 4px;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
    }
    .CmAddList_font_active {
      background: #be9457;
    }
  }
  .dictograph_box {
    display: none;
  }
  .scroll {
    .CmAddList_content {
      // margin-top: 0.4rem;
      top: 0.4rem;
      .CmAddList_title {
        height: 0.4rem;
        line-height: 0.44rem;
        padding-left: 0.16rem;
        font-family: PingFangSC-Regular;
        font-size: 0.14rem;
        color: rgba(0, 22, 22, 0.45);
        letter-spacing: -0.34px;
      }
      .CmAddList_list_box {
        height: 100%;
        .CmAddList_list {
          background: #ffffff;
          border: 1px solid #ffffff;
          padding: 0px 0px 0px 0.16rem;
          .CmAddList_list_item {
            height: 0.4rem;
            line-height: 0.4rem;
            border-bottom: 1px solid #f6f6f6;
            span {
              font-family: PingFangSC-Regular;
              font-size: 0.15rem;
              color: #3e3e3e;
              letter-spacing: -0.36px;
              margin-right: 0.2rem;
              width: 0.7rem;
              display: inline-block;
              text-align: center;
            }
            input {
              font-family: PingFangSC-Regular;
              font-size: 0.15rem;
              color: rgba(0, 22, 22, 0.85);
              letter-spacing: -0.36px;
              width: 52%;
              height: 0.35rem;
            }
            .CmAddList_list_item_camera {
              float: right;
              width: 0.42rem;
              height: 100%;
              img {
                margin-left: 0.1rem;
                width: 0.19rem;
                height: 0.16rem;
              }
            }
            input::placeholder {
              font-family: PingFangSC-Regular;
              font-size: 0.15rem;
              color: rgba(0, 22, 22, 0.25);
              letter-spacing: -0.36px; // opacity: 0.25;
            }
          }
          .writeNO {
            span {
              color: #c8c5c4;
            }
            input {
              color: #c8c5c4;
            }
          }
          .CmAddList_list_item:last-child {
            border-bottom: 0px solid #f6f6f6;
          }
          .CmAddList_list_item_typeId {
            border-bottom: 1px solid #f6f6f6;
          }
          .CmAddList_list_item_textarea {
            height: auto;
            span {
              font-family: PingFangSC-Regular;
              font-size: 0.15rem;
              color: #3e3e3e;
              letter-spacing: -0.36px;
              margin-right: 0.2rem;
              width: 0.7rem;
              display: inline-block;
              text-align: center;
            }
            textarea {
              width: 70%;
              font-family: PingFangSC-Regular;
              font-size: 0.15rem;
              color: rgba(0, 22, 22, 0.85);
              letter-spacing: -0.36px;
            }
          }
        }
        .CmAddList_gr_foot {
          overflow: hidden;
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 0.1rem;
          .vux-x-icon {
            margin-left: 0.16rem;
            // margin-top: 0.1rem;
            float: left;
            fill: #ff3c00;
          }
          p {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #c0c1c1;
            letter-spacing: -0.41px;
          }
        }
        .CmAddList_button {
          width: 100%;
          margin-top: 0.36rem;
          margin-bottom: 0.5rem;
          text-align: center;
          button {
            background: #a8becf;
            width: 85%;
            height: 0.44rem;
            font-family: PingFangSC-Medium;
            font-size: 0.18rem;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;
          }
          .buttonMeet {
            background: #2a78dc;
          }
          button:active {
            background: #3096f8;
          }
        }
      }
    }
  }
  .CmAddList_alert {
    .CmAddList_alert_box {
      position: fixed;
      left: 0;
      bottom: 0;
      height: 2rem;
      -webkit-transform: translate(0, 100%);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      z-index: 5000;
      width: 100%;
      background-color: #fff;
      transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      transition: transform 0.3s, -webkit-transform 0.3s;
      text-align: center;
      .CmAddList_alert_box_menu {
        margin-top: 0.24rem;
        .CmAddList_alert_box_menu_item {
          touch-action: none;
          height: 0.4rem;
          line-height: 0.4rem;
          border-top: 1px solid #f6f6f6;
          font-family: PingFangSC-Regular;
          font-size: 0.18rem;
          color: rgba(0, 22, 22, 0.85);
          letter-spacing: -0.43px;
          #CmAddList_file {
            display: none;
          }
        }
        .CmAddList_alert_box_menu_item:active {
          background: #f4f4f4;
        }
      }
      .CmAddList_alert_box_action {
        background: #f9fafb;
        padding-top: 0.08rem;
        .CmAddList_alert_box_action_cell {
          width: 100%;
          background-color: #fff;
          height: 0.4rem;
          font-family: PingFangSC-Regular;
          font-size: 0.18rem;
          color: rgba(0, 22, 22, 0.85);
          letter-spacing: -0.43px;
          line-height: 0.4rem;
          text-align: center;
        }
        .CmAddList_alert_box_action_cell:active {
          background: #f4f4f4;
        }
      }
    }
  }
  .CmAddList_alert_active {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    .CmAddList_alert_box {
      transform: translate(0, -4%);
    }
  }
}
</style>
